class Category extends React.Component {
    constructor(props) {
  super(props);
  this.state = {
    thumburl:'',
    name:'',
    id:'0',
    code:'',
    ishide:'none',
  };
}




componentDidMount() {
this.freshlist();
}

freshlist(){
// getcategorylist(res=>{
//     if(res.issuccess==1){
//         console.log(res.list);
//         var listhtml = [];
//         res.list.forEach((x,i) => {
//             listhtml.push(
//                 <tr key={i}>
//                     <td>{x.name}</td>
//                     <td>{x.categoryid}</td>
//                     <td>{x.orders}</td>
//                     <td className='operate'>
//                     <p className='edit' onClick={this.tosubcategory.bind(this,x.id,x.name)}>查看分类</p>
//                     <p className='edit' onClick={this.edit.bind(this,x.id)}>编辑</p>
//                     <p onClick={this.del.bind(this,x.id)}>删除</p>
//                     <p className="order" onClick={this.toorder.bind(this,x.id)}>排序</p>
//                     <p  id={'ishide'+x.id} className='ishide'><input type="text"  id={x.id} placeholder="请输入1-999的数字排序"/>
//                     <span onClick={this.setcategoryorder.bind(this,x.id)} className="btn btn-primary">确认</span><span className="btn btn-default" onClick={this.toorder.bind(this,x.id)}>取消</span></p>
//                     </td></tr>
//             )
//         });
//         this.setState({list:res.list,listhtml})
//     }
// })
}
add(){
  this.setState({clicknew:!0,id:'0'})
}
tosubcategory(id,name){
    localStorage.setItem('categoryname',name);
    window.location.href=('subcategory.html?id='+id) 
    
}
toorder(id){
    let {ishide} = this.state;
    $('#ishide'+id).toggle();
    console.log(ishide,'hide');
    this.setState({ishide});
    $("#"+id).val('');
}
setcategoryorder(id){
    let order = $("#"+id).val(),data;

    if(isNaN(order)||order<1||order>999){
        alert('请输入1-999的正整数');
        return;
    }
    order = Math.floor(order);
   data={id,order};
    setorder(data,res=>{
        if(res.issuccess==1){
            console.log("设置成功");
        }
    });
    this.freshlist();
}
inputchange(e){

this.setState({name:e.target.value})
}
inputcode(e){
    this.setState({code:e.target.value})
    }
clickupload(){
$('#file').click();
}
del_detail_img(){
this.setState({finishupload:!1,thumburl:''})
}
filechange(e){
  var that = this;
this.setState({
    finishupload:!1,
    uploadword:"上传"
  })
var that = this;
var filecode = this.state.filecode;
console.log(filecode,'filecode');
var filedata = $('#file')[0].files[0];

var reader = new FileReader();
reader.readAsDataURL(filedata);
reader.onload= function (e) {
    var thumburl = e.target.result;
    that.setState({thumburl})
 //  that.putlistdata(filecode,[base64str])
    }
}
upload(){
  var that = this;
  var thumburl = this.state.thumburl;
  if(!isBase64(thumburl)){
      alert('请先选择图片')
      return;
  }
uploadimg(thumburl,res=>{
    that.setState({
    finishupload:!0,
    thumburl:`${API_HEAD}imgs/${res.path}`
  })
})

}
submit(){
  var {thumburl,name,code,finishupload,id} = this.state,err='';
  console.log(name,'name');
  console.log(code,'code');
  
  if(!finishupload) err='请先上传图片';
  if(name.length==0) err='请填写分类名称';
  if(code.length==0) err='请填写分类编码';
    if(err.length>0){
        alert(err);
        return;
    }
    var data ={src:thumburl,name,code};
    if(Number( this.state.id)>0){
        data['id'] = this.state.id;
    }
    addcategory(data,res=>{
        if(res.issuccess==1){
            var text = Number( this.state.id)>0?'修改成功':'添加成功'
            alert(text)
            this.setState({
                clicknew:!1,
                finishupload:!1,
                name:'',
                thumburl:''
            })
            this.freshlist();
        }
    })
}
edit(e){
var list = this.state.list;
var item = {};
list.forEach(x => {
    if(x.id==e){
        console.log('code',x.categoryid);
        
        this.setState({
            thumburl:x.picpath,
            name:x.name,
            code:x.categoryid,
            id:x.id,
            clicknew:!0,
            finishupload:!0
        })
    }
});
}
del(e){
  this.setState({delid:e})
  $('#myModal').modal('toggle');
}

confirmdel(){
  delcategory({id:this.state.delid},res=>{
      if(res.issuccess==1){
          $('#myModal').modal('toggle');
                  alert('删除成功')
                  this.setState({
                      clicknew:!1,
                      finishupload:!1,
                      name:'',
                      thumburl:''
                  })
                  this.freshlist();
      }
  })

}


     render() {

            return(

                <div className='content_wrap panel-default content_wrap'>
            <Modal content='确定删除吗？' click={this.confirmdel.bind(this)}/>
                    <div className='breadLine '> 
                        当前位置 > 一级分类管理 
                        </div>
                    <div className='inputs panel-body'>
                        <h3>一级分类管理</h3>
                        <button onClick={this.add.bind(this)}  className='btn add btn-primary center' >新建分类</button>
                        <div style={{display:this.state.clicknew?"":"none"}}>
                        <div className="input-group input-group">
<span className="input-group-addon ">分类名称</span>
<input id='name' onChange={this.inputchange.bind(this)}type="text" value={this.state.name} placeholder='请输入分类名称' className="form-control " />
</div>
                        <div className="input-group input-group">
<span className="input-group-addon ">分类编码</span>
<input id='code' onChange={this.inputcode.bind(this)}type="text" value={this.state.code} placeholder='请输入分类编码' className="form-control " />
</div>
<div className="input-group input-group ">
<span className="input-group-addon desc">上传分类图片</span>
<input onChange={this.filechange.bind(this)} type='file' id='file'/>
<div className='img_warp' >
    <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this,0)} style={{display:this.state.thumburl.length>0?"none":""}}/>
    <img style={{display:this.state.thumburl.length>0?"block":"none"}} src={this.state.thumburl} className="img-responsive"  /> 
    <img  className='closeimg thumb'style={{display:this.state.thumburl.length>0?"block":"none"}}  onClick={this.del_detail_img.bind(this,-1)} src='./src/img_close.png'/>
    </div>
    

</div>
<button style={{marginLeft:'122px'}} onClick={this.upload.bind(this)}  className={`btn submit btn-${this.state.finishupload?"success":"primary"} center `} >{this.state.finishupload?"上传成功":"上传"}</button>
<button onClick={this.submit.bind(this)}  className='btn submit btn-primary center ' >确定添加</button>
</div>
                        
<table className="table table-hover">
<thead>
<tr>
<th>分类名称</th>
<th>分类编码</th>
<th>排序</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{this.state.listhtml}
</tbody>
</table>
                 
                </div>
                </div>
            )
        }
    }





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='4'/> */}
        <LeftMenu code='category'/>
        <Category/>
        </div>
            //<Barrage/>
,$('.container')[0]
)